<template>
  <div class="CourseIntroduce">
    <div class="chapter-one-level-box" v-if="!currentChapter.id">
      <div class="chapter-one-level">
        <div
          v-for="chapter in oneLevelList"
          :key="chapter.id"
          class="chapter-one-level-item"
          @click="setCurrentChapter(chapter)"
        >
          {{ chapter.label }}
        </div>
      </div>
    </div>
    <div class="chapter-two-level" v-else>
      <el-row justify="space-between">
        <Title title="章节框架" isBack="true" />
        <el-button
          @click="toChapter"
          color="#8FBB62"
          :dark="true"
          style="color: #fff"
        >
          返回篇章
        </el-button>
      </el-row>
      <el-tree
        ref="treeRef"
        node-key="id"
        :data="chapterTwoList"
        :default-expanded-keys="[currentChapter.id]"
      >
        <template #default="{ node, data }">
          <div class="one-level-title" v-if="node.level === 1">
            <el-switch
              v-model="switchDisabled"
              style="
                --el-switch-on-color: #dcdfe6;
                --el-switch-off-color: #ff4949;
              "
              :before-change="switchChange"
            >
              <template #active-action>
                <span class="custom-active-action">{{ data.index }}</span>
              </template>
            </el-switch>
            <span class="com-tree-text">{{ node.label }}</span>
          </div>
          <div class="two-level-title" v-else>
            <span class="com-tree-text" @click="toDetail(data)">{{
              node.label
            }}</span>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { ref, h, computed } from "vue";
import Title from "../common/Title.vue";
import { useSubjectStore } from "../../store/subject";
import { useRouter } from "vue-router";
const router = useRouter();
let subjectStore = useSubjectStore();

const chapterTwoList = ref(subjectStore.courseDetail.children);
const oneLevelList = computed(() => {
  const list = [...chapterTwoList.value];
  return list.reverse();
});
const currentChapter = ref({});

const switchDisabled = ref(true);
const setCurrentChapter = (item) => {
  currentChapter.value = item;
};
const switchChange = () => {
  switchDisabled.value = true;
  return new Promise((_, reject) => {
    setTimeout(() => {
      switchDisabled.value = true;
      return reject(new Error("Error"));
    }, 1000);
  });
};
const toDetail = (data) => {
  //跳转页面
  router.push("/Subject/" + data.id + "/" + data.label);
};
const toChapter = () => {
  currentChapter.value = {};
};
</script>

<style lang="less" scoped>
.CourseIntroduce {
  .chapter-one-level-box {
    background: url("/public/img/chapter-bg2.png") no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 650px;
    position: relative;
    // padding-top: 110px;
    // padding-left: 310px;
    .chapter-one-level {
      position: relative;
      width: 600px;
      height: 500px;
      margin: 0 auto;
      padding-top: 110px;
    }
    .chapter-one-level-item {
      font-size: 26px;
      font-weight: bold;
      color: #f69547;
      cursor: pointer;
      &::after {
        content: " ";
        display: block;
        width: 80px;
        height: 2px;
        background: #f69b53;
        position: absolute;
        transform: rotate(30deg);
        right: -90px;
        bottom: -14px;
      }
      &:nth-child(1) {
        position: absolute;
      }
      &:nth-child(2) {
        position: absolute;
        margin-top: 124px;
      }
      &:nth-child(3) {
        position: absolute;
        margin-top: 270px;
      }
      &:nth-child(4) {
        position: absolute;
        margin-left: 380px;
        margin-top: 65px;
        &::after {
          left: -70px;
          transform: rotate(145deg);
          width: 70px;
        }
      }
      &:nth-child(5) {
        position: absolute;
        margin-left: 415px;
        margin-top: 155px;
        &::after {
          left: -75px;
          transform: rotate(145deg);
        }
      }
      &:nth-child(6) {
        position: absolute;
        margin-left: 460px;
        margin-top: 265px;
        &::after {
          left: -90px;
          transform: rotate(145deg);
        }
      }
    }
  }
  .chapter-two-level {
    padding: 20px 30px;
    :deep(.el-tree-node__content) {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
    .el-tree {
      padding-left: 20px;
      padding-top: 20px;
    }
    .one-level-title {
      font-size: 16px;
      font-weight: bold;
      background: #fcfefb;
      width: 100%;
      margin: 10px 0;
      .el-switch {
        margin-right: 15px;
      }
    }
    .two-level-title {
      font-size: 14px;
      color: #333333;
      padding-left: 12px;
      .com-tree-text::before {
        position: absolute;
        content: " ";
        width: 25px;
        height: 1px;
        background: #dcdfe6;
        border-radius: 50%;
        margin-top: 7px;
        margin-left: -30px;
      }
    }
    :deep(.el-tree-node__content) {
      margin: 10px 0;
    }
    .custom-active-action {
      color: #333;
      font-weight: normal;
      font-size: 12px;
    }
    :deep(.el-tree-node__children) {
      margin-left: 30px;
      border-left: 1px solid #dcdfe6;
    }
  }
}
</style>
